Uncontrolled Components are form elements in React JS whose current values are managed by the DOM rather than being controlled by React state. React can provide an initial value using attributes such as defaultValue and defaultChecked. When the user changes the input, the DOM maintains its current value.
React developers can access the current values of uncontrolled form elements using the useRef() Hook, DOM references, or the browser's FormData API when the form is submitted.
Uncontrolled components are useful for simple forms, file uploads, and situations where input values only need to be read when a form is submitted.
Course Link: JustAcademy React JS Training Course
Demo Link: Register for React JS Course Demo
An uncontrolled component is a form element whose current value is maintained by the browser's DOM. Unlike a controlled component, it does not require React state to be updated on every keystroke.
For example, a text input can have an initial value, but users can change it directly in the browser. React does not control the input's current value through a state variable.
function NameForm() {
return (
<form>
<label htmlFor="name">Enter your name:</label>
<input
id="name"
name="name"
type="text"
defaultValue="Amit"
/>
</form>
);
}
export default NameForm;In this example, the input initially displays "Amit". The user can edit the text, and the browser maintains the current value without using React state.
Uncontrolled components rely on the DOM to maintain input values. React can specify the initial value, while the browser handles subsequent user edits.
defaultValue or defaultChecked when needed.React renders the form element
↓
Browser maintains the current input value
↓
User enters or changes information
↓
DOM stores the updated value
↓
React reads the value using a ref or FormData
↓
Application processes the form dataThe defaultValue prop specifies the initial value of an uncontrolled text input or textarea. It does not continuously control the field after the element has mounted.
function UsernameForm() {
return (
<div>
<label htmlFor="username">Username:</label>
<input
id="username"
name="username"
type="text"
defaultValue="Guest"
/>
</div>
);
}
export default UsernameForm;The input initially displays "Guest". If the user changes it to "Rahul", the browser maintains "Rahul" as the current value. Changing the defaultValue prop after mounting does not control the current input value.
defaultValue sets the initial value.value with state when React must control the current value.The useRef() Hook creates a reference that can point to a DOM element. By assigning the ref to an input's ref prop, you can read its current value when needed.
const inputRef = useRef(null);After React mounts the input, inputRef.current refers to the DOM input element. Its current text can be accessed through inputRef.current.value.
import { useRef } from "react";
function NameForm() {
const nameRef = useRef(null);
function handleSubmit(event) {
event.preventDefault();
alert("Entered name: " + nameRef.current.value);
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input
id="name"
name="name"
type="text"
ref={nameRef}
defaultValue="Amit"
/>
<button type="submit">Submit</button>
</form>
);
}
export default NameForm;useRef(null) creates a ref object.ref prop connects the ref to the input element.nameRef.current.value reads the current value.When a form contains several uncontrolled inputs, you can create a separate ref for each field. This approach is useful when values only need to be accessed at specific moments, such as form submission.
import { useRef } from "react";
function RegistrationForm() {
const nameRef = useRef(null);
const emailRef = useRef(null);
const phoneRef = useRef(null);
function handleSubmit(event) {
event.preventDefault();
const formData = {
name: nameRef.current.value,
email: emailRef.current.value,
phone: phoneRef.current.value
};
console.log(formData);
}
return (
<form onSubmit={handleSubmit}>
<input
name="name"
ref={nameRef}
defaultValue=""
placeholder="Full name"
/>
<input
name="email"
type="email"
ref={emailRef}
defaultValue=""
placeholder="Email address"
/>
<input
name="phone"
type="tel"
ref={phoneRef}
defaultValue=""
placeholder="Phone number"
/>
<button type="submit">Register</button>
</form>
);
}
export default RegistrationForm;Each ref provides access to its corresponding DOM element. When the form is submitted, the current values are collected into a JavaScript object.
The browser's FormData API is another convenient way to read values from uncontrolled forms. It collects the values of form controls that have appropriate name attributes.
function ContactForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const name = formData.get("name");
const email = formData.get("email");
console.log("Name:", name);
console.log("Email:", email);
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name:</label>
<input
id="name"
name="name"
defaultValue=""
required
/>
<label htmlFor="email">Email:</label>
<input
id="email"
name="email"
type="email"
defaultValue=""
required
/>
<button type="submit">Submit</button>
</form>
);
}
export default ContactForm;event.preventDefault() prevents the browser's default form navigation.new FormData(event.currentTarget) collects the form's named field values.formData.get("name") retrieves the value associated with the name field.Important: Every field you want to retrieve must have a suitable name attribute. Unchecked checkboxes are not included in the submitted FormData entries.
Uncontrolled text inputs are useful when the application only needs to read the entered value when an action occurs, rather than update React state on every keystroke.
function SearchForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const searchTerm = formData.get("search");
console.log("Search term:", searchTerm);
}
return (
<form onSubmit={handleSubmit}>
<input
name="search"
type="text"
placeholder="Enter search term"
/>
<button type="submit">Search</button>
</form>
);
}
export default SearchForm;The browser maintains the input value. When the user submits the form, the application reads the search term using FormData.
A textarea collects multiline text such as comments, feedback, or descriptions. An uncontrolled textarea can use defaultValue to set its initial text.
function FeedbackForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const feedback = formData.get("feedback");
alert("Feedback: " + feedback);
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="feedback">Your Feedback:</label>
<textarea
id="feedback"
name="feedback"
defaultValue=""
rows={4}
placeholder="Write your feedback"
/>
<button type="submit">Submit Feedback</button>
</form>
);
}
export default FeedbackForm;The browser maintains the text entered by the user. The current value is read when the form is submitted.
A select dropdown allows users to choose an option from a list. In an uncontrolled select element, defaultValue specifies the initially selected option.
function CourseForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const course = formData.get("course");
alert("Selected course: " + course);
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="course">Select Course:</label>
<select
id="course"
name="course"
defaultValue="react"
>
<option value="react">React JS</option>
<option value="flutter">Flutter</option>
<option value="selenium">Selenium</option>
</select>
<button type="submit">Submit</button>
</form>
);
}
export default CourseForm;The dropdown initially selects React JS. Users can select a different option, and the current selection is read on submission.
An uncontrolled checkbox can use defaultChecked to specify its initial selection state. The browser maintains its current checked state after the user interacts with it.
function TermsForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const accepted = formData.get("terms") === "accepted";
alert(accepted ? "Terms accepted" : "Please accept the terms");
}
return (
<form onSubmit={handleSubmit}>
<label>
<input
type="checkbox"
name="terms"
value="accepted"
defaultChecked={false}
/>
I accept the terms and conditions
</label>
<button type="submit">Continue</button>
</form>
);
}
export default TermsForm;In this example, the checkbox starts unchecked. If selected, its value is included in FormData. If it remains unchecked, the field is omitted.
Radio buttons let users choose one option from a group. Uncontrolled radio buttons can use defaultChecked to set the initially selected option.
function PaymentForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const payment = formData.get("payment");
alert("Payment method: " + payment);
}
return (
<form onSubmit={handleSubmit}>
<label>
<input
type="radio"
name="payment"
value="card"
defaultChecked
/>
Card
</label>
<label>
<input
type="radio"
name="payment"
value="upi"
/>
UPI
</label>
<button type="submit">Submit</button>
</form>
);
}
export default PaymentForm;Both radio buttons share the same name, so the user can select only one option. The chosen value is read using FormData.
File inputs are commonly used for uploading images, documents, resumes, and other files. In React, a file input is treated as uncontrolled because its selected file value cannot be set programmatically like a normal text input.
Use a ref to access the DOM element and its files property, or read the selected file using FormData.
import { useRef } from "react";
function FileUploadForm() {
const fileRef = useRef(null);
function handleSubmit(event) {
event.preventDefault();
const file = fileRef.current.files[0];
if (!file) {
alert("Please select a file.");
return;
}
alert("Selected file: " + file.name);
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="document">Choose a document:</label>
<input
id="document"
name="document"
type="file"
ref={fileRef}
/>
<button type="submit">Upload</button>
</form>
);
}
export default FileUploadForm;This example reads the selected file's name. It does not upload the file to a server. Actual uploads require additional handling, such as sending the file through a request using FormData.
Both approaches can be used to create forms in React. The appropriate choice depends on how the application needs to manage and use the form values.
| Feature | Controlled Components | Uncontrolled Components |
|---|---|---|
| Value management | React state | DOM |
| Common props | value, checked |
defaultValue, defaultChecked |
| Reading values | From state variables | Using refs or FormData |
| State updates while typing | Usually yes | Not required |
| Live validation | Convenient to implement | Requires additional handling |
| Code complexity | Can require more state and handlers | Often simpler for basic forms |
| File inputs | Cannot control the selected file value normally | Commonly used with refs or FormData |
| Best suited for | Forms with live feedback or state-dependent UI | Simple forms whose values are read when needed |
const [name, setName] = useState("");
<input
value={name}
onChange={(event) => setName(event.target.value)}
/><input name="name" defaultValue="" />In the controlled example, React state determines the current value. In the uncontrolled example, the browser maintains the current value.
Uncontrolled components can use built-in HTML validation attributes and custom validation when the form is submitted. Common attributes include required, minLength, maxLength, and suitable input types.
function RegistrationForm() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const name = formData.get("name").trim();
const email = formData.get("email");
if (!name) {
alert("Please enter your name.");
return;
}
if (!email) {
alert("Please enter your email.");
return;
}
alert("Form validation completed.");
}
return (
<form onSubmit={handleSubmit}>
<input
name="name"
placeholder="Full name"
required
/>
<input
name="email"
type="email"
placeholder="Email address"
required
/>
<button type="submit">Register</button>
</form>
);
}
export default RegistrationForm;The browser checks the required fields and email format before normal form submission. The custom handler then reads and validates the submitted values. Client-side validation improves usability, but important rules must also be checked on the server.
Uncontrolled forms can be reset using the browser's native form reset behavior. A reset restores the controls to their initial values, including values specified by defaultValue and defaultChecked.
function ResetForm() {
return (
<form onSubmit={(event) => event.preventDefault()}>
<input
name="name"
defaultValue="Amit"
placeholder="Name"
/>
<input
name="email"
type="email"
defaultValue=""
placeholder="Email"
/>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
);
}
export default ResetForm;Clicking Reset restores the name field to "Amit" and the email field to an empty string.
value when the intention is to create an uncontrolled input. Use defaultValue for an initial value.checked instead of defaultChecked when you do not want React to control the checkbox or radio button.name attribute when reading values through FormData.defaultValue after mounting will update the current input value.event.preventDefault() when using a custom onSubmit handler to avoid the browser's default navigation.defaultValue for initial text or dropdown values.defaultChecked for initial checkbox or radio selection.This project demonstrates an uncontrolled form using FormData to collect a student's name, email, and selected course.
function App() {
function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const name = formData.get("name").trim();
const email = formData.get("email");
const course = formData.get("course");
if (!name || !email || !course) {
alert("Please complete all required fields.");
return;
}
console.log({ name, email, course });
alert("Registration form completed for " + name);
}
return (
<main>
<h1>Student Registration</h1>
<form onSubmit={handleSubmit}>
<label htmlFor="name">Full Name:</label>
<input
id="name"
name="name"
defaultValue=""
required
/>
<label htmlFor="email">Email Address:</label>
<input
id="email"
name="email"
type="email"
defaultValue=""
required
/>
<label htmlFor="course">Select Course:</label>
<select
id="course"
name="course"
defaultValue=""
required
>
<option value="">Choose a course</option>
<option value="React JS">React JS</option>
<option value="Flutter">Flutter</option>
<option value="Selenium">Selenium</option>
</select>
<button type="submit">Register</button>
<button type="reset">Reset</button>
</form>
</main>
);
}
export default App;defaultValue prop defines the initial input or dropdown value.onSubmit handler reads the values.name attribute.Note: This project is for front-end learning. It does not save registration details permanently or send them to a backend.
An uncontrolled component is a form element whose current value is maintained by the DOM rather than React state.
defaultValue is used for text inputs, textareas, and select elements. defaultChecked is used for checkboxes and radio buttons.
You can use a ref to read ref.current.value or use FormData when the form is submitted.
The useRef() Hook creates a reference that can be used to access a DOM element or retain a value between renders without causing a re-render when the ref changes.
FormData is a browser API that collects values from named form controls and can be used to read or submit form information.
value controls the current value of a form element, usually through React state. defaultValue specifies the initial value of an uncontrolled field.
No. A file input's selected files are controlled by the user through the browser. React applications commonly access them using refs or FormData.
They are useful for simple forms when values only need to be read during submission, for file inputs, and for certain integrations with non-React code.
Yes. They support browser validation attributes and custom validation when values are read from the DOM or FormData.
No. They only provide access to the input values. Saving data requires additional application logic and usually a backend or data service.
defaultValue.defaultValue and defaultChecked.useRef().Uncontrolled Components are a useful React JS technique for building forms in which the DOM maintains the current input values. React can provide initial values through defaultValue and defaultChecked, while refs and FormData allow applications to read the current values when required. Understanding uncontrolled components alongside controlled components helps developers choose the appropriate approach for each form and build practical React applications.
Learn more through the JustAcademy React JS Training Course.
To explore the course through a demo, visit Register for React JS Course Demo.
